<!DOCTYPE html>
<html style="height: 100%;">
	  
		<meta charset="utf-8" />
		<title>五子棋-登陆界面</title>
		<style>
		.body_class{
			height: 100%;
			background-image: url(./img/玩具小屋.jpg);
			background-size:100% 100%;
			display: flex;/*设置为弹性盒子**/
			flex-direction:row;/*水平排列**/
			align-items:center;/*横向居中**/
			justify-content:center;/*纵向居中**/
		}
		.main_div{
			width:400px;
			height:250px;
			background-color:bisque;
			border-radius: 10px;
			box-shadow: 10px 10px 10px #888888;
			display: flex;
			flex-direction: column;
			//justify-content:center;
			align-items:center;
		}
		.title_span{
			margin-top: 30px;
			font-size: 25px;
			font-family: 楷体"";
			text-shadow: 5px 5px 5px black;
		}
		.item_div{
			margin-top: 10px;
			align-items: center;
			display: flex;
			
		}
		.button_div{
			margin-top: 20px;
			display: flex;
			align-items: center;
			
		}
		</style>
	
		<script src="./js/jquery.js"></script>
		<script>
		//全局变量
		
		var codeKey;
		
		//页面加载时触发
		$(function(){
			//生成一个随机的key
			codeKey=Math.random()*100000;
			//$("#img1").attr("src","http://localhost:8080/user/code?codekey="+codeKey)
		    createCode();
		});
		
		//重新生成验证码
		function createCode(){
			//给image标签重新设置src属性，发送请求
			$("#codeImg")
			.attr("src", "http://localhost:8080/user/code?codekey=" + codeKey + "&time=" + new Date().getTime());
		}
		
		//去注册页面
		function goRegisterPage(){
			//alert("123")
			//跳转到注册页面
			location.href="./register.html"
		}
				  				
		//登录的方法
		    function login(){
		    var username=$("#username").val();
		    var password=$("#password").val();
			var code=$("#code").val();
			  					
			//前端校验
			
			//ajax请求后端进行登录			
			$.ajax({
			type:"POST",
			url:"http://localhost:8080/user/login",
			data:{
			    username:username,
			  	password:password,
				codekey:codeKey,
			  	code:code
			  	},
			  		success: function(data){
				
			  		//登陆结果的反馈
			  		//json.stringify - js的对象 转换成为字符串
					//js - 非null的对象，默认为true，否则就是false
			  		if(data){
						if(data.username=="-1"){
							alert("验证码错误");
							return;
						}
						
			  		//登录成功
			  		alert("登录成功！");
					//保证登录凭证（id、用户名、昵称）
					//id
					localStorage.setItem("username",data.username);
					localStorage.setItem("nickname",data.nickname);
					localStorage.setItem("happyBean",data.happyBean);
					localStorage.setItem("header",data.header);
					//alert(data.nickname)
					//跳转到游戏页面
					location.href="game.html";
			  		}else{
			  		//登录失败
			  		alert("用户名或密码错误！")
			  			}
			  		}
			  	});
			  }
		  /**
		   * 跳转到忘记密码的页面
		   */
		  function forgetPassword(){
			  //alert("123");
			  location.href="forgetpassword.html";
		  }
		</script>
	</head>
	<!--网页体-->
	<body class="body_class">
		
		<!-- 登录注册的背景框 -->
		<div class="main_div">
			<span class="title_span">五子棋</span>
			<div class="item_div">
				账号:<input type="text" id="username" placeholder="请输入账号"/>
			</div>
			<div class="item_div">
				密码:<input type="password" id="password" placeholder="请输入密码"/>
			</div>
			<div class="item_div">
				验证码：<input style="width:40px;" id="code" />
				<img  id="codeImg" 
				      src="http://localhost:8080/user/code"
					  onclick="createCode()"
				      style="width: 80px; height: 50px; background-color: #888888; margin-left: 10px;" />
			</div>
			<div class="button_div">
				<button onclick="login()">登录</button>
				<button onclick="goRegisterPage()">去注册</button>
				<button onclick="forgetPassword()">忘记密码</button>
			</div>
		</div>
	</body>
</html>
